<template>
  <div class="app-container">
    <el-row :gutter="20" class="searchAndNew">
      <el-col :span="16">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="medium"
          @click="addRoleBtn"
          >新增</el-button
        >
        <i class="iconfont ">&#xe6dd;</i>
          <i class="iconfont iconbitian"></i>
        </el-col
      >
      <el-col :span="4">
        <el-input
          placeholder="请输入内容"
          v-model="listQuery.query"
          @input="inputQueryChange()"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    <!-- 这里是列表组件 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="expand" align="center">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="角色名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="描述">
              <span>{{ props.row.description }}</span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.createTime }}</span>
            </el-form-item>

            <el-form-item label="状态">
              <span>{{ props.row.isActive == "0" ? "启用" : "停用" }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        label="角色名称"
        prop="name"
        width="200px "
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="描述"
        prop="description"
        width="200px"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="是否启用"
        prop="status"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isActive"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="100"
            :inactive-value="0"
            @change="changeStatus($event, scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="200px">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="editRoleBtn(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="deleteRoleBtn(scope.row)"
            >删除</el-button
          >
          <el-button
            type="warning"
            size="small"
            icon="el-icon-setting"
            @click="grantRoleBtn(scope.row)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <pagination
      class="pagestyle"
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

    <!-- 这里是添加和修改组件 -->
    <el-dialog
      :title="titleType"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="roleForm"
        :rules="rules"
        ref="roleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="id" prop="id" v-if="titleType === '编辑角色'">
          <el-input v-model="roleForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input v-model="roleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="isActive">
          <el-switch
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="100"
            :inactive-value="0"
            v-model="roleForm.isActive"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('roleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('roleForm')">重置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addRole, updateRole,deleteRole } from "@/api/role";
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  data() {
    return {
      titleType: "新建角色",
      dialogVisible: false,
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        query: ""
      },
      roleForm: {
        id: "",
        name: "",
        description: "",
        isActive: "",
        flag: "1"
      },
      rules: {
        name: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
          { min: 3, max: 12, message: "长度在 3 到 12个字符", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery).then(response => {
        console.log(response);
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },

    inputQueryChange() {
      this.fetchData();
    },
    addRoleBtn() {
      this.titleType = "添加角色";
      this.dialogVisible = true;
      this.roleForm = this.$options.data().roleForm;
    },
    editRoleBtn(params) {
      this.titleType = "编辑角色";
      this.dialogVisible = true;
      this.roleForm = params;
    },
    changeStatus($event, data) {
      updateRole(data).then(res => {
        this.$message({
          message: res.message,
          type: "success"
        });
      });
    },
    deleteRoleBtn(data) {
      deleteRole(data).then(res=>{
          this.$message({
          message: res.message,
          type: "success"
        })
        this.fetchData()
      })

    },
    grantRoleBtn(data) {},

    handleClose() {
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("roleForm", this.roleForm);
          if (this.roleForm.id == "") {
            addRole(this.roleForm).then(res => {
              this.dialogVisible = false;

              this.$message({
                message: res.message,
                type: "success"
              });

              this.fetchData();
            });
          } else {
            updateRole(this.roleForm).then(res => {
              this.$message({
                message: res.message,
                type: "success"
              })
               this.dialogVisible = false;
            });
          }
        } else {
          alert("subnit error!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.searchAndNew {
  margin-bottom: 10px;
  background-color: #eee;
  line-height: 40px;
  padding: 5px 0px;
  margin: 5px 0;
}
.pagestyle {
  margin: 10px 0;
  padding: 5px 0;
  background-color: #eee;
}
.demo-ruleForm {
  padding-right: 50px;
}
</style>